/**
* @description: 已办工单 ==> 已办工单（我完成的）
**/
<template>
  <view class="task-monitor">
    <nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
      <img @click="screen" slot="screen" src="../../../static/img/sx.png" alt="">
    </nav-bar>
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue" 
        left-icon="" action-text="重置" right-icon="search" 
        placeholder="请输入站点名称" @click="showSearch=true" @cancel="onSearch('')" />
    </view>
    <view class="task-main" v-if="monitorList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 列表循环   -->
        <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
          <view class="task-list" v-for="(item,index) in monitorList" :key="index" @click="jump(item)">
            <view class="task-top">
              <img src="../../../static/img/light.png" alt="">
              <text class="equip-title">{{item.NAME}}</text>
              <text :class="equStatus[item.TASK_STATE].class">
                <text :style="{color: equStatus[item.TASK_STATE].color}">{{item.TASK_STATE_NAME}}</text>
              </text>
            </view>
            <hr class="patrol-hr">
            <ul class="task-list-main">
              <li>
                <text class="task-title">工单类型：</text>
                <text class="task-titles">{{item.TASK_TYPE_NAME}}</text>
              </li>
              <li>
                <text class="task-title">计划巡视时间：</text>
                <text class="task-titles">{{item.JHXSKSSJ}} ～ {{item.JHXSJSSJ}}</text>
              </li>
              <li>
                <text class="task-title">巡视站点：</text>
                <text class="task-titles">{{item.TASK_SITE_NAME}}</text>
              </li>
              <li>
                <text class="task-title">巡视负责人：</text>
                <text class="task-titles">{{item.XSFZR}}</text>
              </li>
<!--              <li>-->
<!--                <text class="task-title">巡视人员：</text>-->
<!--                <text class="task-titles">{{item.TOUR_OPER_LISTNAME}}</text>-->
<!--              </li>-->
            </ul>
            <!-- 圆加虚线   -->
            <view class="by"></view>
            <view class="byr"></view>
            <hr class="task-hr">
            <view class="bottom-patrol">
              <view class="left-bottom-patrol">
                <text>工单进度：</text>
                <text>{{item.YWC}}/{{item.TOTAL}}</text>
              </view>
              <view class="right-bottom-patrol">
                <!-- <van-button type="info" class="patrol-btn" @click.stop="toReceive(item.OBJ_ID)">退回</van-button> -->
              </view>
            </view>
          </view>
          <!-- 上拉提示语 -->
          <!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
        </van-list>

      </van-pull-refresh>
    </view>
  
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>

    <!--筛选弹窗-->
    <screenPopup :typeList="typeList" :showScreen="showScreen" @closePopup="showScreen=false" @confirm="confirmCondition" />
  </view>
</template>

<script>
import navBar from '../../../components/common/nav-bar'
import { Dialog } from 'vant'
import { mapGetters } from 'vuex'
import screenPopup from '../../../components/common/screenPopup'
import searchEquMatch from '../../common/searchEquMatch'

export default {
  name: 'completedTask',
  components: { navBar, screenPopup, searchEquMatch },
  props: {},
  data() {
    return {
      backgroundColor: '#417ADC',
      title: '已办工单',
      current: 0,
      showScreen: false,
      showSearch: false,
      menuList: [{}, {}, {}, {}],
      monitorList: [],
      searchValue: '',
      taskList: [],
      typeList: [],
      task_type: [],
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      loadMoreText: '加载中...', // 上拉提示语
      showLoadMore: false,
      page: 1, // 当前数据页数
      totalPage: 0, // 总页数
      pageSize: 20, // 默认每页20条
      total: 0, // 总条数
      equStatus: {
        1: {
          // 待分配/待领取
          class: '',
          color: ''
        },
        2: {
          // 未执行
          class: 'equip-state-wzx',
          color: '#FF7070'
        },
        3: {
          // 执行中
          class: 'equip-state-zxz',
          color: '#FFAD0E'
        },
        99: {
          // 已完结
          class: 'equip-state-wc',
          color: '#3CDA68'
        }
      }
    }
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  mounted() {
    this.getMonitorList()
  },
  methods: {
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    // 工单完成情况
    getMonitorList() {
      this.$api
        .taskListByAccomplish({
          limit: this.pageSize,
          page: this.page,
          userName: this.userData.userName,
          userId: this.userData.userId,
          batchId: this.userData.batchId,
          // task_state: '3',
          site_name: this.searchValue,
          task_type: ''
        })
        .then(res => {
          this.isLoading = false
          this.refreshing = false
          this.monitorList = this.monitorList.concat(res.data.taskList)
          // 因为接口将筛选列表和筛选结果放在一个接口中，导致点击筛选时，出现重新获取筛选列表的情况，从而导致，筛选无法记忆（刷新），解决办法为判断是否已经含有
          if (!this.typeList.length) {
            let typeList = []
            typeList.push({
              title: '工单类型',
              optionList: res.data.task_type.map(item => {
                !item.VALUE ? (item.VALUE = '') : null
                return item
              }),
              type: 'TASK_TYPE_NAME'
            })
            this.typeList = typeList
          }
          this.total = res.data.total_number
        })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.monitorList = [];
      this.getMonitorList();
    },
    loadMore() {
      if (this.total > this.monitorList.length) {
        this.page = this.page + 1
        this.getMonitorList()
      } else {
        this.finished = true
      }
    },
    confirmCondition(selected) {
      if (selected['TASK_TYPE_NAME'] == 0) {
        this.task_type = ''
      } else {
        this.task_type = selected['TASK_TYPE_NAME']
      }
      this.onRefresh()
    },
    screen() {
      this.showScreen = true
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    chooseMenu(index) {
      this.current = index
    },
    toReceive(id) {
      Dialog.confirm({
        title: '是否确认退回'
      })
        .then(() => {
          // on confirm
          this.$api.patrolTaskApi.updateTask({ objId: id }).then(res => {
            if (res.code == 0) {
              this.getMonitorList()
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    jump(item) {
      uni.navigateTo({
        url: `/pages/workBench/completedTask/taskDetail?TASK_STATE=${item.TASK_STATE}&OBJ_ID=${item.OBJ_ID}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.task-monitor {
  width: 100vw;
  height: 100vh;
  background: #f2f6fa;
  overflow: hidden;
  .header {
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }
  }
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(30) px2vw(30) px2vw(30) px2vw(30);
    .van-search {
      padding: 0 0;
      height: 38px;
    }
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    /deep/.van-field__control {
      height: 30px;
    }
  }
  .task-main {
    height: calc(100vh - #{px2vh(260)} - 38px);
    overflow: auto;
    position: relative;
    .task-list {
      width: px2vw(1020);
      //height: px2vh(566);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      margin: px2vh(30);
      padding-bottom: px2vh(30);
      .task-top {
        width: calc(100% - #{px2vw(80)});
        margin-left: px2vw(40);
        height: px2vh(140);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(40);
          float: left;
        }
        .equip-title {
          color: #333;
          font-size: px2vw(48);
          width: px2vw(600);
          height: px2vh(48);
          line-height: px2vh(48);
          float: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: px2vh(48);
          margin-left: px2vw(25);
        }
        .equip-state-wc,
        .equip-state-wzx,
        .equip-state-zxz {
          display: flex;
          justify-content: center;
          align-items: center;
          width: px2vw(223);
          height: px2vh(50);
          font-size: px2vw(32);
          border-radius: px2vw(10);
          margin-top: px2vh(48);
          margin-left: px2vw(27);
          float: left;
          //text-align: center;
        }
        .equip-state-wc {
          color: #3CDA68;
          background: rgba(62, 218, 104, 0.1);
        }
        .equip-state-wzx {
          color: #FF7070;
          background: rgba(255, 112, 112, 0.1);
        }
        .equip-state-zxz {
          color: #FFAD0E;
          background: rgba(255, 180, 0, 0.1);
        }
      }
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
    }
    .task-list-main {
      width: px2vw(940);
      //height: px2vh(266);
      margin-left: px2vw(40);
      padding-bottom: px2vh(30);
      li {
        margin-top: px2vh(30);
        height: px2vh(36);
        font-size: px2vw(36);
        .task-title {
          color: #666;
        }
        .task-titles {
          color: #333;
        }
      }
    }
    .task-hr {
      width: px2vw(940);
      border: 0;
      border-bottom: px2vh(6) dashed #e5e5e5;
      margin-top: px2vh(14);
      margin-left: px2vw(40);
    }
    .by {
      position: absolute;
      width: px2vw(40);
      height: px2vh(40);
      border-radius: px2vw(100);
      left: px2vw(12);
      float: left;
      background: #f2f6fa;
    }
    .byr {
      position: absolute;
      width: px2vw(40);
      height: px2vh(40);
      border-radius: px2vw(100);
      right: px2vw(12);
      float: right;
      background: #f2f6fa;
    }
    .bottom-patrol {
      width: px2vw(940);
      height: px2vh(54);
      margin-left: px2vw(40);
      margin-top: px2vh(26);
      font-size: px2vw(32);
      .left-bottom-patrol {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px2vw(260);
        padding: 2px 4px;
        //height: px2vh(54);
        line-height: px2vh(54);
        background: #ecf1fb;
        float: left;
        text-align: center;
        color: #417adc;
        border-radius: px2vw(8);
      }
      .right-bottom-patrol {
        width: px2vw(120);
        height: px2vh(54);
        float: right;
        .patrol-btn {
          width: px2vw(120);
          height: px2vh(54);
          background: #417adc;
          float: right;
          //border-radius: px2vw(20);
        }
        /deep/.van-button--normal {
          padding: 0;
        }
      }
    }
  }
}
</style>